<template>
  <!-- html 结构 -->
  <div class="person">
    <h1>当水温大于等于80℃或水位大于等于90CM</h1>
    <h2>水温：{{ t }}℃</h2>
    <h2>水位：{{ h }}CM</h2>
    <button @click="changeT">水温+10</button>
    <button @click="changeH">水位+10</button>
  </div>
</template>

<!-- 在vue3中监事一个reactive定义的响应式常量应该是这么写的 -->
<script lang="ts" setup name="Person">
import { ref, watch, watchEffect } from "vue";
let t = ref(10);
let h = ref(0);

function changeT() {
  t.value += 10;
}
function changeH() {
  h.value += 10;
}

// watch 需要明确指出监听谁
// watch([t, h], (value) => {
//   if (t.value >= 80 || h.value >= 90) {
//     console.log("watch监听水温和水位", value);
//   }
// });


// watchEffect 同样能监听watch可以监听的数据
// watchEffect 不需要明确指出监听谁（函数中使用到哪些数据就监听那些数据）
watchEffect(() => {
  if (t.value >= 80 || h.value >= 90) {
    console.log("watchEffect监听水温和水位", t.value, h.value);
  }
})
</script>

<style>
/* 样式 */
button {
  background-color: aqua;
  margin: 5px;
}
</style>
